import { mapGetters } from "vuex";
import Tab from "vux/src/components/tab/tab.vue";
import TabItem from "vux/src/components/tab/tab-item.vue";
import Marquee from "vux/src/components/marquee/marquee.vue";
import MarqueeItem from "vux/src/components/marquee/marquee-item.vue";

import { setTimeout, clearTimeout } from "timers";
import template from "./sudokuTemplate";
const { render, staticRenderFns } = template;

export default {
  render,
  staticRenderFns,
  components: {
    Tab,
    TabItem,
    Marquee,
    MarqueeItem,
  },
  data() {
    return {
      introShow: true, //说明和奖品切换
      ruleShow: false, //活动规则显示
      nowLi: null, //当前奖品
      congratulation: false, //中奖结果
      gameTime: 0, //游戏次数
      noTimes: false, //游戏次数0提示
      flag: false, //摇奖中
      indexMsg: null, //首页数据
      rules: null, //活动规则
      myAward: null, //我的奖品
      page: 1,
      count: 1,
      idIndex: 0,
      ruleIndex: [0, 1, 2, 4, 7, 6, 5, 3], // 滚动规则
      result: null, //开奖结果
      id: 0,
      pullUpLoad: false,
      browserkernel: "", //浏览器内核
      templateNum: "",
      styleTemplate: null,
    };
  },
  computed: {
    ...mapGetters(["platformConfig"]),
  },
  created() {
    document.title = "幸运九宫格";
    let vm = this;
    vm._getActivityBack();
    vm.browserRedirect();
    vm.id = vm.$route.query.id;
    if (vm.id) {
      vm._getIndex();
      vm._getRules();
    }
  },
  mounted() {
    let that = this;
    window.onresize = () => {
      clearTimeout(that.browserTime);
      that.browserTime = setTimeout(() => {
        that.browserRedirect();
      }, 400);
    };
  },
  methods: {
    browserRedirect() {
      let sUserAgent = navigator.userAgent.toLowerCase();
      let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
      let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
      let bIsMidp = sUserAgent.match(/midp/i) == "midp";
      let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
      let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
      let bIsAndroid = sUserAgent.match(/android/i) == "android";
      let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
      let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
      if (
        bIsIpad ||
        bIsIphoneOs ||
        bIsMidp ||
        bIsUc7 ||
        bIsUc ||
        bIsAndroid ||
        bIsCE ||
        bIsWM
      ) {
        this.browserkernel = "h5";
      } else {
        this.browserkernel = "pc";
      }
    },
    _getActivityBack() {
      let vm = this;
      let params = {};
      params.type = 2;
      vm.$http
        .post(vm.urlRequest + "?m=api&c=app&a=getActivityBack", params)
        .then((res) => {
          vm.templateNum = res.data;
          console.log("风格模板：", vm.templateNum);
        });
    },
    playAgain() {
      this.page = 1;
      this._getRules();
      this._getIndex();
      this.congratulation = true;
    },
    ruleHide() {
      this.introShow = true;
      this.ruleShow = false;
    },
    tabChange(index) {
      if (index == 0) {
        this.introShow = true;
        this.pullUpLoad = false;
        setTimeout(() => {
          this.$refs.scroll.initScroll();
        }, 20);
      } else {
        this.introShow = false;
        this.pullUpLoad = true;
        setTimeout(() => {
          this.$refs.scroll.initScroll();
        }, 20);
      }
    },
    pullingDown() {
      this.page = 1;
      this._getRules();
    },
    pullingUp() {
      if (this.pullUpLoadFlag) {
        this.$refs.scroll.forceUpdate(false);
        return;
      }
      this.page += 1;
      this._getRules(1);
    },
    turning() {
      let vm = this;
      if (vm.gameTime <= 0) {
        vm.noTimes = true;
        return;
      }
      if (vm.flag) {
        return;
      }
      let time = 80;
      vm.flag = true;
      vm.result = null;
      vm.count = 1;
      vm._getLucDraw();
      vm.nowLi = 1;
      vm.timer = setInterval(() => {
        vm.count++;
        if (vm.idIndex == 7) {
          vm.idIndex = 0;
        } else {
          vm.idIndex++;
        }
        vm.nowLi = vm.indexMsg.config[vm.ruleIndex[vm.idIndex]].prize_id;
      }, time);
    },
    _getRules(flag) {
      let vm = this;
      let params = {};
      params.id = vm.id;
      params.type = 3;
      params.page = vm.page;
      vm.pullUpLoadFlag = false;
      vm.$http
        .post(vm.urlRequest + "?m=web&c=activity&a=nineRole", params)
        .then((res) => {
          if (res.status == 0) {
            vm.rules = res.result;
            if (vm.page == 1) {
              vm.myAward = res.result.list;
            } else {
              vm.myAward = vm.myAward.concat(res.result.list);
            }

            if (res.result.list.length < 20) {
              vm.pullUpLoadFlag = true;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    _getIndex() {
      let vm = this;
      let params = {};
      params.id = vm.id;
      params.type = 3;
      vm.$vux.loading.show();
      vm.$http
        .post(vm.urlRequest + "?m=web&c=activity&a=nineIndex", params)
        .then((res) => {
          if (res.status == 0) {
            vm.indexMsg = res.result;
            vm.gameTime = vm.indexMsg.num;
          }
          vm.$vux.loading.hide();
        })
        .catch((err) => {
          vm.$vux.loading.hide();
          console.log(err);
        });
    },
    _getLucDraw() {
      let vm = this;
      let params = {};
      params.id = vm.id;
      params.type = 3;
      vm.$http
        .post(vm.urlRequest + "?m=web&c=activity&a=nineLucDraw", params)
        .then((res) => {
          if (res.status == 0) {
            vm.result = res.result;
            vm.gameTime = vm.result.num;
          } else {
            clearInterval(vm.timer1);
            clearInterval(vm.timer);
            vm.nowLi = null;
            vm.flag = false;
            vm.$vux.toast.text(res.ret_msg, "bottom");
            return;
          }
        })
        .catch((err) => {
          vm.$vux.toast.text("抽奖失败,请重试", "bottom");
          console.log(err);
        });
    },
  },
  watch: {
    browserkernel(obj) {
      let vm = this;
      if (vm.templateNum == 2) {
        //端午节风格
        vm.styleTemplate = obj == "h5" ? "mobileStyle1" : "pcStyle1";
      } else if (vm.templateNum == 4) {
        //春节风格
        vm.styleTemplate = obj == "h5" ? "mobileStyle2" : "pcStyle2";
      }
    },
    templateNum(val) {
      let vm = this;
      if (val == 2) {
        vm.styleTemplate =
          vm.browserkernel == "h5" ? "mobileStyle1" : "pcStyle1";
      }
      if (val == 4) {
        vm.styleTemplate =
          vm.browserkernel == "h5" ? "mobileStyle2" : "pcStyle2";
      }
    },
    platformConfig(obj) {
      if (obj.platform_name) {
        document.title = "幸运九宫格";
      }
    },
    count() {
      let vm = this;
      if (vm.result) {
        if (vm.count == 16 + Math.ceil(Math.random() * 8) || vm.count > 3 * 8) {
          clearInterval(vm.timer);
          let count2 = 0;
          vm.timer1 = setInterval(() => {
            count2++;
            if (vm.idIndex == 7) {
              vm.idIndex = 0;
            } else {
              vm.idIndex++;
            }
            vm.nowLi = vm.indexMsg.config[vm.ruleIndex[vm.idIndex]].prize_id;
            if (count2 > 3) {
              if (vm.nowLi == vm.result.prize_id) {
                clearInterval(vm.timer1);
                vm.congratulation = true;
                vm.flag = false;
              }
            }
          }, 300);
        }
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.timer1);
    clearInterval(this.timer);
  },
};

// WEBPACK FOOTER //
// ./src/components/activityCenter/sudoku/sudoku.vue
